<!--学生信息收集表详情页 点赞评论收藏-->
<template>
  <div id="coll-details">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <div class="container">
      <!-- 标题 start-->
      <el-row class="coll-el-row1">
        <el-col>
          <h1 class="coll-title" v-text="collentioninfo.title"></h1>
        </el-col>
        <!-- <el-col style="margin-top:-55px;">
          <el-tooltip effect="dark" content="公告" placement="bottom-start">
            <svg class="icon-tong" aria-hidden="true" @click="drawer = true">
              <use xlink:href="#icon-tongzhigonggao" />
            </svg>
          </el-tooltip>
        </el-col>
        <el-col style="margin-top:-55px;margin-left:65%;">
          <el-button
            class="coll-el-row1-botton"
            type="primary"
            icon="el-icon-plus"
            @click="dialogVisible6 = true"
          >发布公告</el-button>
        </el-col>-->
      </el-row>

      <!-- 标题 end-->
      <!-- 创建时间 start-->
      <el-row class="coll-el-row2">
        <div class="coll-row-div">
          <el-col :span="4">
            <span>开始时间：</span>
            <span v-text="collentioninfo.startTime"></span>
          </el-col>
          <el-col :span="4">
            <span>截止时间：</span>
            <span v-text="collentioninfo.endTime"></span>
          </el-col>
          <el-col :span="4">
            <span>发布人：</span>
            <span v-text="collentioninfo.realName"></span>
          </el-col>
          <el-col :span="4">
            <span>报名费：</span>
            <span v-text="collentioninfo.price"></span>
          </el-col>
          <el-col :span="4">
            <span>报名人数：</span>
            <span v-text="collentioninfo.fillNum"></span>
          </el-col>
          <el-col :span="4">
            <span>收藏人数：</span>
            <span v-text="collentioninfo.likeNum"></span>
          </el-col>
        </div>
      </el-row>
      <!-- 创建时间 end-->
      <!-- 收集表详细信息 start-->
      <el-row class="coll-el-row3">
        <el-col v-html="collentioninfo.info">收集表内容</el-col>
      </el-row>
      <el-row
        class="coll-el-row4"
        v-for="(collentioninfourls,index) in collentioninfourl"
        :key="index"
      >
        <el-col>
          <a
            :href="downFileUrl"
            title="下载附件"
            v-text="collentioninfourls.name"
            @click="downFile(collentioninfourls.attachmentId)"
          ></a>
        </el-col>
      </el-row>
      <!-- 收集表详细信息 end-->
      <!-- 评论点赞 start-->

      <el-row class="coll-el-row5">
        <div class="col-btn-item">
          <el-tooltip effect="dark" content="收藏" placement="bottom-start">
            <el-button @click="likeCollection()" :class="{changeColor1:commentColorShow1}">
              <i class="el-icon-star-off star-flag"></i>收藏
            </el-button>
          </el-tooltip>
        </div>

        <!-- <el-col :span="2" v-show="showChangeButton"> -->
        <div class="col-btn-item" v-show="showWriteBtn">
          <el-tooltip effect="dark" content="填写表单" placement="bottom-start">
            <el-button type="success" @click="fillTable">
              <i class="el-icon-view star-flag"></i>填写
            </el-button>
          </el-tooltip>
        </div>

        <!-- <el-col :span="2" v-show="showChangeButton"> -->
        <div class="col-btn-item" v-show="showChangeButton">
          <el-tooltip effect="dark" content="查看填写记录" placement="bottom-start">
            <el-button type="primary" @click="showFillHistory">
              <i class="el-icon-edit star-flag"></i>填写记录
            </el-button>
          </el-tooltip>
        </div>

        <!-- <el-col :span="2" v-show="showChangeButton">
          
        </el-col>-->

        <!-- <div class="col-btn-item" v-show="showChangeButton"> -->
        <div class="col-btn-item">
          <el-tooltip effect="dark" content="查看公告" placement="bottom-start">
            <el-button class="btn2-notice" @click="showAnnouncements">
              <i class="el-icon-postcard star-flag"></i>公告
            </el-button>
          </el-tooltip>
        </div>
      </el-row>
      <!--评论 start-->
      <div class="coll-comment">
        <el-row :gutter="5">
          <el-col :span="22">
            <textarea
              type="text"
              placeholder="说点什么..."
              class="textarea-style"
              style="height: 60px; padding-right: 60px;"
              v-model="pushComments.Content"
              required
            ></textarea>
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click="pushComment">评论</el-button>
          </el-col>
        </el-row>
      </div>
      <!--评论 end-->

      <!--我的评论 start-->
      <el-row class="coll-li-el-row">
        <el-col :span="2">
          <span>我的评论</span>
        </el-col>
      </el-row>

      <div class="coll-li-el-div" v-if="myComment.length != 0">
        <div style="height: 150px; overflow-x:auto">
          <div>
            <ul v-infinite-scroll="load" infinite-scroll-disabled="disabled">
              <!-- <ul> -->
              <li v-for="(myComItem,index) in myComment" :key="index">
                <el-row>
                  <el-col :span="19">
                    <p v-text="myComItem.content">我的评论内容</p>
                  </el-col>
                  <el-col :span="4" class="anony-switch">
                    <el-tooltip effect="dark" content="匿名评论" placement="bottom-start">
                      <el-switch
                        style=" margin-top: 15px;margin-left: 20px;"
                        v-model="myComItem.status"
                        active-color="#409eff"
                        :active-value="3"
                        :inactive-value="1"
                        active-text="匿名"
                        inactive-text="署名"
                        inactive-color="grey"
                        @change="anonymize(myComItem)"
                      ></el-switch>
                    </el-tooltip>
                  </el-col>
                  <el-col :span="1" class="reply-delete">
                    <el-tooltip effect="dark" content="删除" placement="bottom-start">
                      <i class="el-icon-delete" @click="replyDelete(myComItem)"></i>
                    </el-tooltip>
                  </el-col>
                </el-row>
              </li>
            </ul>

            <p v-if="loading">
              <i class="el-icon-loading" style="margin-left:50%;"></i>
            </p>
            <p v-if="noMore" style="margin-left:50%;">
              <span style="font-size:14px; color:#409eff;">没有更多了</span>
            </p>
          </div>
        </div>
      </div>
      <div
        v-else
        style="text-align: center; font-size: 14px; color: #666; border-bottom: 1px dotted #bbb; margin-bottom: 30px;"
      >
        <p>没有更多了</p>
      </div>
      <!--我的评论 end-->

      <!--评论区 start-->
      <template>
        <el-row class="coll-li-el-row">
          <el-col :span="2">
            <span>评论区</span>
          </el-col>
        </el-row>
        <div
          class="all-comment"
          style="height: 500px; overflow-x:auto"
          v-if="firstComment.length>0"
        >
          <div>
            <ul v-infinite-scroll="load" infinite-scroll-disabled="disabled">
              <!-- 一级评论 start -->
              <li v-for="(fItem,index) in firstComment" :key="index">
                <el-row>
                  <div class="coll-li-el-col">
                    <!-- accountId: (...)
                    collectionId: (...)
                    commentId: (...)
                    content: (...)
                    createTime: (...)
                    likeNum: (...)
                    note: (...)
                    parentContent: (...)
                    parentId: (...)
                    realName: (...)
                    status: (...)-->
                    <span
                      style="font-weight: bold; color: #444"
                      v-text="fItem.fistCommentItem.realName"
                    ></span>
                  </div>

                  <div class="coll-li-el-col-note">
                    <div class="comment-active">
                      <div>
                        <span v-text="fItem.fistCommentItem.note">2020-06-23 16:30</span>
                      </div>
                    </div>
                  </div>
                  <div class="coll-li-el-col-time">
                    <div class="comment-active">
                      <div>
                        <span v-text="fItem.fistCommentItem.createTime">2020-06-23 16:30</span>
                      </div>
                    </div>
                  </div>
                  <!-- 
                  <el-col :span="2" class="coll-li-el-col-icon">
                    <div class="comment-active">
                      <button>
                        <i class="el-icon-thumb star-flag"></i>
                        <span>点赞</span>
                      </button>
                    </div>
                  </el-col>-->

                  <el-col :span="2" class="coll-li-el-col-icon">
                    <div class="comment-active">
                      <button
                        :class="[fItem.fistCommentItem.isLike?'interact':'']"
                        @click="addLike(fItem.fistCommentItem)"
                      >
                        <!-- <i class="el-icon-thumb star-flag"></i> -->
                        <i
                          v-if="!fItem.fistCommentItem.isLike"
                          class="iconfont icon-zandianzan1 star-flag"
                        ></i>
                        <i v-else class="iconfont icon-zandianzan2 star-flag"></i>

                        <span
                          v-if="fItem.fistCommentItem.likeNum>0"
                          v-text="fItem.fistCommentItem.likeNum"
                        >点赞</span>
                        <span v-else>点赞</span>
                      </button>
                    </div>
                  </el-col>

                  <el-col :span="2" class="coll-li-el-col-icon">
                    <div class="comment-active">
                      <button @click="commontShows(index,fItem.fistCommentItem.realName)">
                        <!-- <i class="el-icon-chat-dot-round star-flag"></i> -->
                        <i class="iconfont icon-huifu star-flag"></i>
                        <span>回复</span>
                      </button>
                    </div>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="21">
                    <p v-text="fItem.fistCommentItem.content"></p>

                    <!-- 二级评论 start -->
                    <div
                      class="reply-item"
                      v-for="(sItem,sIndex) in fItem.secondCommentItems"
                      :key="sIndex"
                    >
                      <span
                        class="reply-user"
                        v-html="sItem.parentRealName!=null?sItem.realName+' <span style=\'font-weight: normal;font-size: 13px\'>回复</span> '+sItem.parentRealName: sItem.realName"
                      >回复人的名称</span>
                      <span class="reply-content" v-text="sItem.content">回复的内容</span>
                      <el-row class="reply-info-row">
                        <div class="coll-li-el-col-note" v-if="sItem.note!=''">
                          <div class="comment-active">
                            <div>
                              <span v-text="sItem.note">回复人的单位</span>
                            </div>
                          </div>
                        </div>
                        <div class="coll-li-el-col-time">
                          <div class="comment-active">
                            <div>
                              <span v-text="sItem.createTime">回复的时间</span>
                            </div>
                          </div>
                        </div>

                        <el-col :span="2" class="coll-li-el-col-icon">
                          <div class="comment-active">
                            <button :class="[sItem.isLike?'interact':'']" @click="addLike(sItem)">
                              <!-- <i class="el-icon-thumb star-flag"></i> -->
                              <i v-if="!sItem.isLike" class="iconfont icon-zandianzan1 star-flag"></i>
                              <i v-else class="iconfont icon-zandianzan2 star-flag"></i>

                              <span v-if="sItem.likeNum>0" v-text="sItem.likeNum">点赞</span>
                              <span v-else>点赞</span>
                            </button>
                          </div>
                        </el-col>

                        <el-col :span="2" class="coll-li-el-col-icon">
                          <div class="comment-active">
                            <button @click="commontSecShows(index,sIndex,sItem.realName)">
                              <!-- <i class="el-icon-chat-dot-round star-flag"></i> -->
                              <i class="iconfont icon-huifu star-flag"></i>
                              <span>回复</span>
                            </button>
                          </div>
                        </el-col>
                      </el-row>
                      <!--回复 start-->
                      <div
                        class="coll-comment coll-comment1"
                        v-show="index==commontSecShow0&&sIndex==commontSecShow"
                      >
                        <el-row :gutter="5" class="coll-comment coll-comment1">
                          <el-col :span="22">
                            <textarea
                              type="text"
                              :placeholder="replyTarget"
                              class="textarea-style textarea-style1"
                              style="height: 60px; padding-right: 60px;"
                              v-model="replyContent"
                            ></textarea>
                          </el-col>
                          <el-col :span="2">
                            <el-button
                              type="success"
                              @click="replySecondComment(sItem.collectionId,sItem.commentId)"
                            >评论</el-button>
                          </el-col>
                        </el-row>
                      </div>
                      <!--回复 end-->
                    </div>
                    <!-- 二级评论 end -->
                  </el-col>
                </el-row>
                <!--回复 start-->
                <div class="coll-comment coll-comment1" v-show="index==commontShow">
                  <el-row :gutter="5" class="coll-comment coll-comment1">
                    <el-col :span="22">
                      <textarea
                        type="text"
                        :placeholder="replyTarget"
                        class="textarea-style textarea-style1"
                        style="height: 60px; padding-right: 60px;"
                        v-model="replyContent"
                      ></textarea>
                    </el-col>
                    <el-col :span="2">
                      <el-button
                        type="success"
                        @click="replyFirstComment(fItem.fistCommentItem.collectionId,fItem.fistCommentItem.commentId)"
                      >评论</el-button>
                    </el-col>
                  </el-row>
                </div>
                <!--回复 end-->
              </li>
              <!-- 一级评论 end -->
            </ul>
            <p v-if="loading">
              <i class="el-icon-loading" style="margin-left:50%;"></i>
            </p>
            <p v-if="noMore" style="margin-left:50%;">
              <span style="font-size:14px; color:#409eff;">没有更多了</span>
            </p>
          </div>
        </div>
        <div
          v-else
          style="text-align: center; font-size: 14px; color: #666; border-bottom: 1px dotted #bbb; margin-bottom: 30px;"
        >
          <p>没有更多了</p>
        </div>
      </template>
      <!--评论区 end-->

      <!-- 评论点赞 end-->
      <!-- 公告 start-->
    </div>
    <div class="container">
      <div class="col-md-2"></div>
      <div class="col-md-4">
        <div>
          <el-drawer :visible.sync="drawer" :direction="direction">
            <component :is="announcement" :announcementList="announcementList"></component>
          </el-drawer>
        </div>
      </div>
    </div>
    <!-- 公告 end-->
    <!-- 底部 -->
    <!-- <div class="footer">
      <component :is="footer"></component>
    </div>-->
    <!-- 底部end -->

    <!-- 发布公告 start -->
    <el-dialog
      title="发布公告"
      style="font-weight: bold"
      :visible.sync="dialogVisible6"
      width="45%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="24">
          <div style="
                margin-bottom: 20px;">
            <el-input v-model="annoContent.title" placeholder="公告名称"></el-input>
          </div>
        </el-col>
      </el-row>
      <ckeditor :editor="editor" v-model="annoContent.content" :config="editorConfig"></ckeditor>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible6 = false">取 消</el-button>
        <el-button type="primary" @click="publicAnnocement">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发布公告 end -->
  </div>
</template>
      
  

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import StudentHeader from "../../components/StudentHeader.vue";
import Footer from "../../components/Footer.vue";
import Announcement from "../../components/Announcement.vue";
export default {
  inject: ["reload"],
  data() {
    return {
      dialogVisible6: false,
      announcement: "Announcement",
      header: "StudentHeader",
      footer: "Footer",
      drawer: false,
      direction: "rtl",
      showDialog: false,
      enterdailog: false,
      value2: "true",

      commentColorShow2: false,
      commontShow: -1,
      commontSecShow0: -1,
      commontSecShow: -1,
      count: 10,
      loading: false,
      // 富文本编辑器
      editor: ClassicEditor,
      editorConfig: {
        // The configuration of the editor.
        language: "zh-cn", // 配置语言
        uiColor: "#FFF", // 背景颜色
        width: "auto", // 宽度
        height: "300px", // 高度
        skin: "office2003", // 界面v2,kama,office2003
        toolbarCanCollapse: false, // 工具栏是否可以被收缩
        resize_enabled: true, // 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
        ckfinder: {
          uploaded: 1,
          url: "/"
          // 后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
        },
        toolbar: [
          "heading", //段落
          "|", //分隔
          "bold", //加粗
          "italic", //倾斜
          "bulletedList", //项目列表
          "numberedList", //编号列表
          "undo", //撤销
          "redo" //重做
        ] //工具栏显示
      },
      // 公告内容
      annoContent: {
        collectionId: "",
        title: "",
        content: ""
      },
      // 收集表详细信息
      collentioninfo: [],
      // 查看附件
      collentioninfourl: [],
      downFileUrl: "",
      // 发表评论参数
      pushComments: {
        // 收集表id
        pushCommentCollectionId: 1,
        // 父评论id
        pushCommentParentId: -1,
        // 评论内容
        Content: ""
      },
      replyContent: "",
      // 是否收藏
      commentColorShow1: "",
      // 传过来的收集表id
      allCollectionId: "",
      // 登录页面传过来的值
      dataFromLogin: [],
      // 是否显示修改 查看按钮
      showChangeButton: "",
      showWriteBtn: "",
      myComment: [],
      // 一级评论数据
      firstComment: [],
      replyTarget: "回复：",
      announcements: [],
      announcementList: {
        collectionId: "",
        announcements: {}
      },
      // 公告分页
      total: 0,
      pageNum: 1,
      pageSize: 5
      // 分页end
    };
  },

  created() {
    // 获取跳转时带过来的id
    this.allCollectionId = this.$route.query.collectionId;
    // 获取登陆页面传过来的值
    this.dataFromLogin = JSON.parse(sessionStorage.getItem("toIndexForm"));

    this.getCollectionInfo();
    this.getCollectionInfoUrl();
    this.showLikeCollection();
    this.getMyComment();
    this.getFirstComment();
    this.getFillRecord();
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  methods: {
    // 跳转填写历史记录页面
    showFillHistory() {
      this.$router.push({
        path: "/fillHistory" + "?collectionId=" + this.allCollectionId
      });
    },
    // 跳转填写表单页面
    fillTable() {
      this.$router.push({
        path: "/studentsApplication" + "?collectionId=" + this.allCollectionId
      });
    },
    // 获取当前学生所有的收集表填写记录
    getFillRecord() {
      this.$get(
        this.$urlPath.record + "record/getFillRecord/" + this.allCollectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.showChangeButton = true;
            this.showWriteBtn = false;
          } else {
            this.showChangeButton = false;
            this.showWriteBtn = true;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 查看收集表详细信息
    getCollectionInfo() {
      this.$get(
        this.$urlPath.collection + "collection/info/" + this.allCollectionId
      ).then(resp => {
        if (resp.code != 200) {
          return this.$message.error(resp.message);
        }
        // 查询成功保存到collentioninfo
        this.collentioninfo = resp.data;
        this.pushComments.pushCommentCollectionId = resp.data.collectionId;
        if (this.collentioninfo.accountId == this.dataFromLogin.accountId) {
          // 发布信息收集表的人与登录的人是同一个
          console.log(this.dataFromLogin);

          // console.log("同一个");
          this.showChangeButton = true;
        } else {
          // 发布信息收集表的人与登录的人不是同一个
          // console.log("不是同一个");
          this.showChangeButton = false;
        }
      });
    },
    // 查看所有附件
    getCollectionInfoUrl() {
      this.$get(
        this.$urlPath.collection +
          "collection/attachments/" +
          this.allCollectionId
      ).then(resp => {
        if (resp.code != 200) {
          return this.$message.error("查询失败！");
        }
        // 查询成功保存到collentionList
        this.collentioninfourl = resp.data;
        // console.log(this.collentioninfourl);
      });
    },
    // 显示收藏状态
    showLikeCollection() {
      this.$get(
        this.$urlPath.collection +
          "like/likeCollection/get/" +
          this.allCollectionId
      ).then(resp => {
        // 等于null 没有收藏
        if (resp.data == null) {
          this.commentColorShow1 = false;
          console.log(resp.data);
        } else {
          this.commentColorShow1 = true;
        }
      });
    },
    // 下载附件
    downFile(attachmentId) {
      this.downFileUrl =
        "http://172.18.84.23:8888/collection-service/collection/attachment/download/" +
        attachmentId;
    },
    // 收藏
    likeCollection() {
      if (this.commentColorShow1 == false) {
        this.$post_form(
          this.$urlPath.collection +
            "like/likeCollection/add/" +
            this.allCollectionId
        ).then(resp => {
          //
          if (resp.code != 200) {
            this.commentColorShow1 = false;
            return this.$message.error(resp.message);
          }
          this.commentColorShow1 = true;
        });
      } else {
        this.$deletes(
          this.$urlPath.collection +
            "like/likeCollection/delete/" +
            this.allCollectionId
        ).then(resp => {
          if (resp.code != 200) {
            this.commentColorShow1 = true;
            return this.$message.error(resp.message);
          }
          this.commentColorShow1 = false;
        });
      }
    },
    // 去修改
    showChange() {
      this.$router.push({ path: "/teacherRevise" });
    },
    // 发布公告
    publicAnnocement() {
      if (this.annoContent.title == "" || this.annoContent.content == "") {
        this.$message.warning("公告内容不完整哟！");
        return;
      }
      this.dialogVisible6 = false;
      this.annoContent.collectionId = this.allCollectionId;
      this.$post_json(
        this.$urlPath.notice + "notice/noticeCollection/add",
        this.annoContent
      )
        .then(resp => {
          // console.log(resp);
          if (resp.code == 200) {
            // this.reload();
            this.$message.success("发布成功");
            this.annoContent.collectionId = "";
            this.annoContent.title = "";
            this.annoContent.content = "";
          } else {
            this.$message.danger("发布失败，请稍后重试");
          }
        })
        .catch(error => {
          this.$message.danger("发布失败，请稍后重试");
        });
    },

    //显示公告
    showAnnouncements() {
      this.$get(
        this.$urlPath.notice +
          "notice/collection/noticeCollection/" +
          this.pageNum +
          "/" +
          this.pageSize +
          "/" +
          this.allCollectionId +
          "?random=" +
          Math.random()
      )
        .then(resp => {
          console.log("resp");
          console.log(resp.data);
          if (
            resp.code == 200 &&
            resp.data.list != null &&
            resp.data.list.length > 0
          ) {
            // this.announcements = resp.data.list;
            // this.total = resp.data.total;
            // console.log(this.total);
            this.announcementList.collectionId = this.allCollectionId;
            this.announcementList.announcements = resp;
            console.log(this.announcementList);

            this.drawer = true;
          } else {
            this.$message.warning("还没有发布过公告哦！");
          }
        })
        .catch(error => {
          // console.log("error");
          console.log(error);
        });
    },
    // 发表评论
    pushComment() {
      if (this.pushComments.Content == "") {
        // alert();
        this.$message.warning("评论内容还没有哦！");
        return;
      }
      this.$post_form(this.$urlPath.comment + "comment/add/", {
        collectionId: this.pushComments.pushCommentCollectionId,
        parentId: this.pushComments.pushCommentParentId,
        content: this.pushComments.Content
      })
        .then(resp => {
          // console.log(resp);
          if (resp.code == 200) {
            this.reload();
          } else {
            // alert("评论失败，请稍后重试");
             this.$message.warning(resp.message);

          }
        })
        .catch(error => {
          // alert(error);
          console.log(error);

        });
    },

    //评论点赞
    addLike(item) {
      if (!item.isLike) {
        this.$post_form(this.$urlPath.comment + "comment/like/add", {
          commentId: item.commentId
        })
          .then(resp => {
            // console.log(resp);
            if (resp.code == 200) {
              this.reload();
            } else {
              // alert("点赞失败，请稍后重试");
             this.$message.warning(resp.message);

            }
          })
          .catch(error => {
            alert(error);
          });
      } else {
        // 取消点赞
        this.$deletes(this.$urlPath.comment + "comment/like/delete", {
          commentId: item.commentId
        })
          .then(resp => {
            // console.log(resp);
            if (resp.code == 200) {
              this.reload();
            } else {
              // alert("取消失败，请稍后重试");
             this.$message.warning(resp.message);

            }
          })
          .catch(error => {
            // alert(error);
          console.log(error);

          });
      }
    },

    // 回复一级评论
    replyFirstComment(collectionId, parentId) {
      if (this.replyContent == "") {
        // alert();
        this.$message.warning("评论内容还没有哦！");
        return;
      }
      this.$post_form(this.$urlPath.comment + "comment/add/", {
        collectionId: collectionId,
        parentId: parentId,
        content: this.replyContent
      })
        .then(resp => {
          // console.log(resp);
          if (resp.code == 200) {
            this.reload();
          } else {
            alert("评论失败，请稍后重试");
          }
        })
        .catch(error => {
          // alert(error);
          console.log(error);

        });
    },
    // 回复er级评论
    replySecondComment(collectionId, parentId) {
      if (this.replyContent == "") {
        // alert();
        this.$message.warning("评论内容还没有哦！");
        return;
      }
      this.$post_form(this.$urlPath.comment + "comment/add/", {
        collectionId: collectionId,
        parentId: parentId,
        content: this.replyContent
      })
        .then(resp => {
          // console.log(resp);
          if (resp.code == 200) {
            this.reload();
          } else {
            // alert("评论失败，请稍后重试");
            this.$message.warning(resp.message);

          }
        })
        .catch(error => {
          // alert(error);
          console.log(error);

        });
    },

    // 显示我的所有评论
    getMyComment() {
      this.$get(
        this.$urlPath.comment + "/myComment/1/9999/" + this.allCollectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            this.myComment = resp.data.list;
          }
        })
        .catch(error => {});
    },

    // 匿名评论
    anonymize(item) {
      this.$put_form(this.$urlPath.comment + "comment/status/update", {
        commentId: item.commentId,
        status: item.status
      })
        .then(resp => {
          this.reload();
        })
        .catch(error => {});
    },

    // 删除我的评论
    replyDelete(item) {
      this.$put_form(this.$urlPath.comment + "comment/status/update", {
        commentId: item.commentId,
        status: 2
      })
        .then(resp => {
          this.reload();
        })
        .catch(error => {});
    },

    // 获取二级评论
    getSecondComment(element) {
      this.$get(
        this.$urlPath.comment + "secondComment/1/9999/" + element.commentId
      )
        .then(resp => {
          if (resp.code == 200) {
            let item = {
              fistCommentItem: element,
              secondCommentItems: resp.data.list
            };
            this.firstComment.push(item);
            // this.secondComment.push(resp.data.list);
          }
        })
        .catch(error => {});
    },

    // 获取一级评论
    getFirstComment() {
      this.$get(
        this.$urlPath.comment + "firstComment/1/9999/" + this.allCollectionId
      )
        .then(resp => {
          if (resp.code == 200) {
            // this.firstComment = resp.data.list;
            // this.firstComment.forEach(element => {
            //   this.getSecondComment(element.commentId);
            // });

            for (let index = 0; index < resp.data.list.length; index++) {
              let element = resp.data.list[index];
              this.getSecondComment(element);
            }
          }
        })
        .catch(error => {});
    },

    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 2;
        this.loading = false;
      }, 2000);
    },

    commontShows(index, name) {
      // console.log("----------" + index);
      // this.commontShow = !this.commontShow;
      if (this.commontShow == index) {
        this.commontShow = -1;
      } else {
        this.commontShow = index;
        this.replyTarget = "回复：" + name;
      }
    },
    commontSecShows(oindex, index, name) {
      // console.log("----------" + index);
      // this.commontShow = !this.commontShow;
      if (this.commontSecShow == index && this.commontSecShow0 == oindex) {
        this.commontSecShow0 = -1;
        this.commontSecShow = -1;
      } else {
        this.commontSecShow0 = oindex;
        this.commontSecShow = index;
        this.replyTarget = "回复：" + name;
      }
    },
    handleClose(done) {
      this.$confirm("确认发布？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  },
  components: {
    Announcement,
    StudentHeader,
    Footer
  }
};
</script>

<style lang="less">
#coll-details {
  height: 1500px;
  @import "../../assets/less/top.less";
  @import "../../assets/less/studentsIndex.less";
  @import "../../assets/less/coll-details.less";
}
</style>